<template>
    <div class="addMask">
        <el-dialog v-model="open" title="分配角色" width="40%">
            <el-form :model="formData" ref="formDataRef" label-width="100px" :rules="rules">
                <el-form-item label="上级组织：" prop="parentOrg">
                    <el-input v-model="formData.parentOrg" disabled style="width:400px;" />
                </el-form-item>
                <el-form-item label="组织名称：" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入组织名称" style="width:400px;" disabled />
                </el-form-item>
                <el-form-item label="组织编号：" prop="nums">
                    <el-input v-model="formData.nums" placeholder="请输入组织名称" style="width:400px;" disabled />
                </el-form-item>
                <el-form-item label="组织主管：" prop="manager">
                    <el-input v-model="formData.manager" placeholder="请输入组织主管" style="width:400px;" disabled />
                </el-form-item>
                <el-form-item label="组织类型：" prop="orgType">
                    <el-radio-group v-model="formData.orgType">
                        <el-radio label="部门"></el-radio>
                        <el-radio label="公司"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="角色：" prop="guest_shop_id">
                    <el-select v-model="formData.guest_shop_id" placeholder="请选择角色" style="width:400px;">
                        <el-option v-for="item in shopList" :key="item.id" :label="item.title" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="success" @click="submitDialog">立即提交</el-button>
                    <el-button @click="open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import api from "@/api/index.js";
import { ElMessage } from "element-plus";
const emit = defineEmits(['init']);
const open = ref(false);
const formRef = ref(null);

// 表单数据初始化
const shopList = ref([
    { id: 1, title: '超级管理员' },   // 超级管理员
    { id: 2, title: '普通管理员' },
    { id: 3, title: '财务' },
])

// 打开弹窗方法
const handleDialog = () => {
    formData.value = {
        id: "",
        name: "",
        parentOrg: "",
        parentId: "",
        orgType: "",
        status: 1,
        config: "",
        description: "",
        nums: ""
    };
    open.value = true;
}

const formData = ref({
    id: null,
    name: '',
    parentOrg: '',
    parentId: null,
    orgType: '',
    status: 1,
    config: '',
    description: '',
    nums: '',
    manager: ""
})

// 定义验证规则
const rules = reactive({
    name: [
        { required: true, message: '请输入组织名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    nums: [
        { required: true, message: '请输入组织编号', trigger: 'blur' },
        { pattern: /^[A-Za-z0-9]+$/, message: '只能输入字母和数字', trigger: 'blur' }
    ],
    orgType: [
        { required: true, message: '请选择组织类型', trigger: 'change' }
    ],
    description: [
        { required: false }, // 可选字段，可以根据需求修改
        { max: 200, message: '描述不能超过200个字符', trigger: 'blur' }
    ]
});

const formDataRef = ref(null);

// 添加顶级组织
const handleAddTop = () => {
    open.value = true;
};



// 提交表单
const submitDialog = () => {
    formDataRef.value.validate((valid) => {
        if (valid) {
            // 这里添加提交接口调用
            open.value = false;
        }
    });
};

defineExpose({
    handleDialog,
});
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>